<!--
 * @Author: 陆成杰
 * @Date: 2022-07-02 22:08:15
 * @LastEditTime: 2022-07-03 12:28:37
 * @LastEditors: 陆成杰
 * @FilePath: /boe/src/views/program-manager/SmallImg.vue
 * Copyright (c) ${now_year} by zucc-陆成杰, All Rights Reserved. 
-->
<template>
  <div>
    <div style="margin-left:88%;margin-top:10px"><el-button type="danger" :icon="Delete" circle @click="deletePic" /></div>
    <div class="main">
      <div style="width: 20px; height: 90px"></div>
      <div class="box">
        <el-image style="width: 56.25px; height: 100px" :src="urlList[0]" fit="fill">
          <template #error>
            <div class="image-slot">
              <!-- <el-icon><icon-picture /></el-icon> -->
            </div>
          </template>
        </el-image>
      </div>
      <div class="box" v-if="state.imgs[0]">
        <el-image style="width: 56.25px; height: 100px" :src="urlList[1]" fit="fill"
          ><template #error>
            <div class="image-slot">
              <!-- <el-icon><icon-picture /></el-icon> -->
            </div>
          </template></el-image
        >
      </div>
      <div class="box" v-if="state.imgs[1]">
        <el-image style="width: 56.25px; height: 100px" :src="urlList[2]" fit="fill"
          ><template #error>
            <div class="image-slot">
              <!-- <el-icon><icon-picture /></el-icon> -->
            </div>
          </template></el-image
        >
      </div>
      <div class="box" v-if="state.imgs[2]">
        <el-image style="width: 56.25px; height: 100px" :src="urlList[3]" fit="fill"
          ><template #error>
            <div class="image-slot">
              <!-- <el-icon><icon-picture /></el-icon> -->
            </div>
          </template></el-image
        >
      </div>
      <div class="box" v-if="state.imgs[3]">
        <el-image style="width: 56.25px; height: 100px" :src="urlList[4]" fit="fill"
          ><template #error>
            <div class="image-slot">
              <!-- <el-icon><icon-picture /></el-icon> -->
            </div>
          </template></el-image
        >
      </div>
      <div class="box2" @click="addBox">
        <div class="box2-img">
          <img src="../../assets/program/add.svg" alt="" />
        </div>
      </div>
      <div style="width: 20px; height: 90px"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import {Delete} from '@element-plus/icons-vue'

const state = reactive({
  num: 0,
  img2: false,
  img3: false,
  img4: false,
  img5: false,
  url: [],
  imgs: [false, false, false, false]
});

const addBox = () => {
  // if( state.num == 2 )
  // state.img2 = true
  // else if( state.num == 3 )
  // state.img3 = true
  // else if( state.num == 4 )
  // state.img4 = true
  // else if( state.num == 5 )
  // state.img5 = true

  state.imgs[state.num] = true

  state.num += 1

  console.log(state.num);
  
}

const deletePic = () => {
  if (state.num != 0) {
    state.imgs[state.num - 1] = false;
    // console.log(urlLists.value);
    state.num -= 1
  }
};

defineProps<{
    urlList: []
}>()
</script>

<style lang="less" scoped>
.main {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}
.box {
  width: 150px;
  height: 100px;
  border: 2px solid #2895ff;
  margin-right: 20px;
}
.box2 {
  width: 150px;
  height: 100px;
  border: 2px dashed rgba(100, 100, 100);
  &-img img {
    width: 50px;
    height: 50px;
  }
  &-img {
    margin-left: 50px;
    margin-top: 20px;
  }
}
.el-image {
  margin-left: 45px;
}
</style>
